<template lang="html">
  <!--pages/personal_center/business/business.wxml-->
  <div class="business-stationed-content">
    <div class="business-stationed-banner">
      <img src="../../../assets/image/personal/business_stationed_heard.png"/>
    </div>
    <div class="business-stationed-heard">
      <img src="../../../assets/image/personal/business_stationed_title.png"/>
      <span>申请资料</span>
    </div>
    <div class="business-form-container">
      <van-cell-group class="business-input">
        <!-- 联系人姓名 -->
        <van-field label="联系人姓名" maxlength="18" v-model="dataForm.contact_name" placeholder="请输入联系人姓名" title-width="109px"/>
        <div class="user-required">（必填）</div>
        <!-- 手机号码 -->
        <van-field label="联系电话" maxlength="11" type="tel" v-model="dataForm.contact_tel" placeholder="请输入联系电话" title-width="109px"/>
        <div class="mobile-required">（必填）</div>
        <!-- 商家名称 -->
        <van-field label="商家名称" maxlength="30" v-model="dataForm.merchant_name" placeholder="输入商家机构全称" title-width="109px"/>
        <div class="merchant-required">（必填）</div>
        <!-- 供货商品种类 -->
        <van-field label="供货商品种类"
          class="form-address"
          v-model="dataForm.product_category"
          placeholder="请输入供货商品种类"
          maxlength="200"
          type="textarea"
          autosize
          title-width="109px"
          @input="ProductCategoryData"
        />
        <div class="shop_goods_number">{{shop_goods_number}}/200</div>
    </van-cell-group>
  </div>
    <div class="position-bottom">
      <van-button type="danger" size="large" @click="onSubmit">提交申请</van-button>
    </div>
  </div>

</template>

<script>
import { Toast } from 'vant'
export default {
  data () {
    return {
      dataForm: {
        contact_name: '',
        contact_tel: '',
        merchant_name: '',
        product_category: ''
      },
      shop_goods_number: 0
    }
  },
  methods: {
    validateForm () {
      if (this.dataForm.contact_name === '') {
        Toast('请填写联系人姓名')
        return false
      }
      if (this.dataForm.contact_tel === '') {
        Toast('请填写联系电话')
        return false
      }
      if (!(/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(this.dataForm.contact_tel))) {
        Toast('请填写正确联系电话')
        return false
      }
      if (this.dataForm.merchant_name === '') {
        Toast('请填写商家名称')
        return false
      }
      return true
    },
    onSubmit () {
      if (this.validateForm()) {
        return new Promise((resolve, reject) => {
          this.$Axios.post('merchants', this.dataForm).then(function (res) {
            if (res.return_code === '0000') {
              Toast('提交申请成功')
              setTimeout(() => {
                window.location = 'yggback://'
              }, 3000)
            } else {
              Toast(res.return_msg)
            }
            resolve()
          }).catch((error) => {
            Toast.clear()
            Toast('提交申请失败')
            console.log('请求失败', error)
          })
        })
      }
    },
    ProductCategoryData (e) {
      this.shop_goods_number = e.length
    }
  }
}
</script>

<style lang="css" scoped>
</style>
